(function() {
    //=============公共函数=================
    function $(d) {
        return document.getElementById(d);
    }
    function query(selector){
        return document.querySelectorAll(selector);
    }
    //矩形相交测试
    function intersect(x1, y1, w1, h1, x2, y2, w2, h2) {
        var zx = Math.abs(x1 + x1 + w1 - x2 - x2 - w2);
        var x = Math.abs(x1 - x1 - w1) + Math.abs(x2 - x2 - w2);
        var zy = Math.abs(y1 + y1 + h1 - y2 - y2 - h2);
        var y = Math.abs(y1 - y1 - h1) + Math.abs(y2 - y2 - h2);
        if (zx <= x && zy <= y)
            return true;
        else
            return false;
    }
    //定时器
    function Timer(s) {
        this.s = s;
        this.total = s / 0.04;
        this.count = 0;
        this.tickOver = function() {
            this.count++;
            if (this.count >= this.total) {
                this.count = 0;
                return true;
            } else {
                return false;
            }
        };
        this.setTime = function(s) {
            this.total = s / 0.04;
        }
    }
    //=============公共函数=================

    //================公共变量===============
    var PEN = null;
    var WIDTH = 0,
        HEIGHT = 0;
    var clouds=[];
    var d=0;
    //================公共变量===============

    var Game = {
        start: function() {
            Ctrl.init();
            PEN = $('view').getContext('2d');
            WIDTH = $('view').width;
            HEIGHT = $('view').height;

            this.init();
            this.animate();
        },
        init: function() {
          Back.init();
          Donkey.init();
          for(var i=1;i<=19;i++){
            var cloud=Object.create(Cloud);
            cloud.init((i-1)*180-3000);
            clouds.push(cloud);
          }
        },
        draw: function() {
            this.trans();
            Back.draw();
            Donkey.draw();
            Donkey.move(d);
            if(Donkey.state<2)return;
            for(var i=0;i<clouds.length;i++){
                var cloud=clouds[i];
                cloud.draw();
                Donkey.step(cloud);
            }
        },
        //驴跳到一定高度后背景动
        trans:function(){
            if(Donkey.y < 300 && !(Donkey.speed < 0 && (Donkey.y - Donkey.speed) > 300)){
                PEN.translate(0,Donkey.speed);//平移坐标体系,简化角色坐标控制
                Back.move(Donkey.speed);//背景分层移动
            }
        },
        animate: function() {
            Game.draw();
            window.setTimeout(Game.animate, 40);
        }
    };
    var Ctrl = {
        KeyDown: function(e) {
           switch(e.keyCode){
                case 37:d=-1;break;
                case 39:d=1;break;
           }
        },
        KeyUp: function(e) {
           switch(e.keyCode){
                case 37:d=0;break;
                case 39:d=0;break;
           }           
        },
        init: function() {
            document.addEventListener('keydown', this.KeyDown);
            document.addEventListener('keyup', this.KeyUp);
        }
    };
    //角色
    var Back = {
        init: function() {
            this.x=0;
            this.y1=this.y2=this.y3=this.y4=0;
            this.imgs=query('#back img');
        },
        draw: function() {
            PEN.drawImage(this.imgs[3],this.x,this.y4-(3072-800));
            PEN.drawImage(this.imgs[2],this.x,this.y3+200);
            PEN.drawImage(this.imgs[1],this.x,this.y2+200);
            PEN.drawImage(this.imgs[0],this.x,this.y1+216);
        },
        move:function(speed){
            this.y1+=speed;
            this.y2+=speed/2;
            this.y3-=speed/2;
            this.y4-=speed/4;
        }
    };
    var Donkey={
        init:function(){
            this.x=160;
            this.y=600;
            this.imgs=query('#donkey img');
            this.icon=$('icon');
            this.timer=new Timer(2);
            this.timer1=new Timer(0.5);
            this.state=0;
            this.count1=this.count2=0;
            this.speed=40;
            this.dy=1;
        },
        draw:function(){
            if(this.state==0){
                PEN.drawImage(this.imgs[0],this.x,this.y);
                PEN.drawImage(this.icon,0,0,380,100,50,350,380,100);
                if(this.timer.tickOver())this.state=1;
            }else if(this.state==1){
                PEN.drawImage(this.imgs[0],this.x,this.y);
                PEN.drawImage(this.icon,0,140,230,75,125,362,230,75);
                if(this.timer1.tickOver())this.state=2;
            }else if(this.state==2){
                if(this.speed>0){
                    PEN.drawImage(this.imgs[1],
                        this.count1*128,0,128,128,
                        this.x,this.y,128,128);
                    this.count1=(this.count1+1)%12;
                }else{
                     PEN.drawImage(this.imgs[2],
                        this.count2*128,0,128,128,
                        this.x,this.y,128,128);
                    this.count2=(this.count2+1)%34;                   
                }
                this.y-=this.speed;
                this.speed-=this.dy;
                if(this.y>580 && this.speed<0){
                    this.speed=40;
                    this.y=600;
                }
            }else if(this.state==3){
                PEN.drawImage(this.imgs[2],
                        this.count2*128,0,128,128,
                        this.x,this.y,128,128);
                this.count2=(this.count2+1)%34; 
                this.y-=this.speed;
                this.speed-=this.dy;               
            }
            
        },
        step:function(cloud){
            if(this.speed<0 && this.y+105>=cloud.y && this.y+105<cloud.y+20
                && this.x+33>=cloud.x && this.x+70<=cloud.x+150){
                this.state=3;
                this.speed=20;
            }

        },
        move:function(d){
            this.x+=d*12;
        }
    };

    var Cloud={
        init:function(y){
            this.x=Math.floor(Math.random()*300)+30;
            this.y=y;
            this.imgs=query('#cloud img');
            this.dir=1-Math.floor(Math.random()*3);
        },
        draw:function(){
            PEN.drawImage(this.imgs[0],this.x,this.y);
            if(this.x<0)this.dir=1;
            if(this.x+150>WIDTH)this.dir=-1;
            this.x+=this.dir*5;
        }
    };
    window.onload = function() {
        Game.start();
    }
})();